<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>

    <script type="text/javascript" src="lsw-date2iso.js"></script>

    <link rel="stylesheet" type="text/css" href="summary.css"> </link>
    <script type="text/javascript" src="summary.js"></script>

    <script type="text/javascript" src="lsw-table.js"></script>
    <script type="text/javascript" src="lsw-compare-table.js"></script>
    <script type="text/javascript" src="lsw-summary-load.js"></script>
    <script type="text/javascript" src="lsw-summary-table.js"></script>
    <script type="text/javascript" src="lsw-summary-status.js"></script>
    <script type="text/javascript" src="lsw-summary-graph.js"></script>
    <link rel="stylesheet" type="text/css" href="lsw-table.css"> </link>
    <link rel="stylesheet" type="text/css" href="lsw-summary-graph.css"> </link>
    <script>
      window.addEventListener('load', function() {
          lsw_summary_load("", function(summary) {
	      lsw_summary_status("status", summary.current)
              lsw_summary_graph("graph", "summary", summary)
              lsw_summary_table("summary", summary)
	      let params = new URLSearchParams(window.location.search)
	      if (params.has("run")) {
		  console.log("runs", params.getAll("run"))
		  let test_runs = new Set()
		  for (run of params.getAll("run")) {
		      if (run in summary.test_run_by_directory) {
			  let test_run = summary.test_run_by_directory[run]
			  test_runs.add(test_run)
		      }
		  }
		  // this will background load
		  lsw_table_select_rows("summary", test_runs)
		  // Pre select and display run=<dir>
		  d3.select("#summary").style("display", "none")
		  d3.select("#compare-results").style("display", "")
		  d3.select("#compare-tests").style("display", "none")
	      }
          })
      })
    </script>

  </head>
  <body>
    <center>
      <div id="graph"></div>
      <br/>
      <div id="status"></div>
      <br/>
      <div id="tables">
	<div id="tabs">
	  <button name="summary"
		  onclick='
		  d3.select("#summary").style("display", "");
		  d3.select("#compare-results").style("display", "none");
		  d3.select("#compare-tests").style("display", "none")'
		  >
	    Summary
	  </button>
	  <button name="compare-results"
		  onclick='
		  d3.select("#summary").style("display", "none");
		  d3.select("#compare-results").style("display", "");
		  d3.select("#compare-tests").style("display", "none")'
		  >
	    Compare Results
	  </button>
	  <!--
	  <button name="compare-tests"
		  onclick='
		  d3.select("#summary").style("display", "none");
		  d3.select("#compare-results").style("display", "none");
		  d3.select("#compare-tests").style("display", "")'
		  >
	    Compare Tests
	  </button>
	  -->
	</div>
	<div>
	  <p>
	    Results can be selected and compared using the "Compare
	    Results" button (tab) (select a result by either clicking on
	    a row below, or result bullet above).
	    <br>
	    For more information, see
	    the <a href="https://github.com/libreswan/libreswan/blob/main/testing/web/README.md">
	    README </a> file.
	  </p>
	</div>
	<div id="summary">
	</div>
	<div id="compare-results" style="display:none">
	</div>
	<div id="compare-tests" style="display:none;text-align:left">
	  <h3>Scratch Pad For when someone implements test comparisons</h3>
	</div>
      </div>
    </center>
  </body>
</html>
